<template>
	<view class="page">
		<accountHeader title="授权信息" switchTo="/pages/home/home">
			<template #right>
				<u-icon name="list" @click="pageTo('/pages/smartKey/myKeys')" width="30px" height="30px" src=""></u-icon>
			</template>
		</accountHeader>
		<view class="page-top">
			<view class="top-info">
				<h4>{{defaultKey.vehicleModel}}</h4>
				<u-button class="changeBtn" @click="show = true">切换</u-button>
			</view>
			<p>{{defaultKey.licencePlate}}</p>
			<u-button class="defineBtn" v-if="this.defaultKey.isDefault">默认钥匙</u-button>
		</view>
		<view class="carImage">
			<u-image width="300px" height="200px" :src="imgUrl + defaultKey.rechargeImage"></u-image>
		</view>
	
		<u-popup :show="show" @close="show = false" :closeable="true">
            <view style="height: 700px; overflow-y:scroll;">
				<view v-for="item in keyList" class="car-list" @click="setDef(item.id)">
					<h4>{{item.vehicleModel}}</h4>
					<p>{{item.licencePlate}}</p>
					<u-button class="defineBtn" v-if="item.isDefault">默认钥匙</u-button>
					<view class="carImage">
						<u-image :src="imgUrl + item.rechargeImage" width="300px" height="200px" src=""></u-image>
					</view>
				</view>
			</view>
		</u-popup>
	
		<u-toast ref="uToasts"></u-toast>
	</view>
</template>

<script>
    import store from '@/store/index.js';
	import accountHeader from "@/components/acountHeader.vue"
	import {getUserKeys} from "@/config/api/user.js"
	import {setDefault} from "@/config/api/carKeys.js"
	export default{
		components:{
			accountHeader
		},
		data() {
			return{
				keyStatus:false,
				trunkStatus:false,
				carWindow:false,
				show:false,
				keyList:'',
				defaultKey:'',
				imgUrl:uni.$u.http.config.baseURL,
			}
		},
		methods:{
			pageTo(url){
				uni.navigateTo({url: url})
			},
			setDef(id){
				setDefault({id:id}).then((res)=>{
					this.getList();
					this.show = false
				})
			},
			getList(){
				getUserKeys().then((res)=>{
					console.log(res);
					if(res.rows.length == 0){
						this.$refs.uToasts.show({
							message: "请先设置默认车辆！"
						})
						setTimeout(function(){
							uni.switchTab({
								url:"/pages/home/home"
							})
						},3000)
					}else{
						console.log(res);
						this.keyList = res.rows;
						this.keyList.forEach((v)=>{
							if(v.isDefault == 1){
								this.defaultKey = v
							}
						})
					}
					
				})
			}
		},
		created(){
			// 获取钥匙列表
			this.getList();
		}
	}
</script>

<style scoped>
	/* 页面 */
	.page{
		margin-top: 10%;
		padding:5%;
	}

	/* 页面头部 */
	.page-top{
		margin-top: 40px;
	}

	.page-top p{
		color: #7F7F7F;
		margin: 10px 0;
	}

	.top-info{
		display: flex;
		align-items: center;
	}

	/* 切换按钮 */
	.changeBtn{
		width: 70px;
		height: 30px;
		border-radius: 20px;
		margin-left: 40px;
		background-color: #F2F2F2;
	}

	/* 默认按钮 */
	.defineBtn{
		width: 100px;
		height: 30px;
		border-radius: 20px;
		margin-left: 0;
		background-color: #F2F2F2;
	}

	.carImage{
		display: flex;
		justify-content: center;
		margin: 10px;
	}

	/* 车辆列表 */
	.car-list{
		padding: 20px;
		border-bottom: 1px solid ghostwhite;
	}
</style>
